<template>
    <el-form ref="form" :model="form" label-width="77px" :rules="rules" @submit.native.prevent @keyup.enter.native="search">
        <el-row :gutter="20">
            <el-col :md="5" :sm="5" :xs="24">
                <el-form-item label="用户ID:" prop="userId">
                    <el-input placeholder="请输入用户ID" v-model="form.userId" />
                </el-form-item>
            </el-col>

            <el-col :md="5" :sm="5" :xs="24">
                <el-form-item label="类型:">
                    <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%;">
                        <el-option v-for="item in arr" :value="item.type" :label="item.label" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :md="5" :sm="5" :xs="24">
                <div class="ele-form-actions">
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="info" plain @click="reset">重置</el-button>
                </div>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            form: {
                userId: undefined,
                type: undefined,
            },
            arr: [
                {
                    type: 4,
                    label: '登录'
                },
                {
                    type: 5,
                    label: '进入游戏'
                },
            ],
            rules: {
                userId: [
                    {
                        required: true,
                        message: '请输入用户ID',
                        trigger: 'blur'
                    }
                ],
            },
        };
    },
    methods: {
        search() {
            this.$refs.form.validate((valid) => {
                if (!valid) return false;
                this.$emit("search", this.form);
            })

        },
        reset() {
            this.form = {
                userId: "",
                type: "",
            };
            this.$emit("search", this.form);
        }
    }
};
</script>